<template>
  <div class="user-container">
    <div class="user-title"><span>用户管理</span></div>
    <!-- filter-binding-squere -->
    <div class="table-header-container">
      <div class="filter-container">
        <!--不一定需要绑定title-->
        <el-input
          v-model="listQuery.id"
          placeholder="ID"
          style="width: 200px"
        />
        <!-- 根据什么排序 -->
        <el-select
          v-model="listQuery.sortBy"
          style="width: 140px"
          class="filter-item"
          @change="handleSortKeyOptionsChange"
        >
          <!-- 排序方式 -->
          <el-option
            v-for="item in sortKeyOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <!-- 升序和降序 -->
        <el-select
          v-model="listQuery.isAsc"
          style="width: 140px"
          class="filter-item"
          @change="handleSortOptionsChange"
        >
          <!-- 排序方式 -->
          <el-option
            v-for="item in sortOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
      </div>
      <div class="header-button-set">
        <el-button
          style="margin-left: 10px"
          type="primary"
          :color="colorManager.getColor('__search_button_color')"
          @click="handlePage"
        >
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </el-button>
        <el-button
          style="margin-left: 10px"
          :color="colorManager.getColor('__insert_button_color')"
          type="primary"
          @click="handleInsert"
        >
          <el-icon>
            <Edit />
          </el-icon>
          添加
        </el-button>
        <el-button
          :loading="downloadLoading"
          type="primary"
          :color="colorManager.getColor('__refresh_button_color')"
          @click="getPage"
        >
          <el-icon>
            <Bottom />
          </el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <!-- 按钮组结束 -->
    <el-table
      class="core-table"
      v-loading="listLoading"
      :data="pageResult.list"
      border
      fit
      highlight-current-row
    >
      <!-- 代码生成区域 -->
      <el-table-column prop="id" label="PK" />
      <el-table-column prop="name" label="用户姓名" />
      <el-table-column prop="avatar" label="用户头像">
        <template #default="scope">
          <elec-img :src="scope.row.avatar"></elec-img>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="账户或者电话" />
      <el-table-column prop="password" label="密码" />
      <el-table-column prop="openid" label="openid，来自微信第三方id" />
      <!-- END 生成结束 -->
      <el-table-column>
        <template #header> 操作</template>
        <template #default="scope">
          <div class="operate-button-set">
            <el-button
              size="small"
              type="primary"
              color="rgb(21,149,106)"
              @click="handleEdit(scope.$index, scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格定义结束 -->
    <pagination
      :pageNo="listQuery.pageNo"
      :pageSize="listQuery.pageSize"
      :disabled="false"
      @getPage="getPage"
      v-model:pageModel="listQuery"
      v-model:resultModel="pageResult"
    ></pagination>

    <!-- 表单弹出层 -->
    <div>
      <Submit
        v-model:dialogVisible="insertDialogVisible"
        @refreshList="getPage"
        dialogTitle="新增中"
        type="insert"
      ></Submit>
      <Submit
        v-model:dialogVisible="updateDialogVisible"
        @refreshList="getPage"
        dialogTitle="更新中"
        :id="operateId"
        type="update"
      ></Submit>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  addUser,
  getUser,
  updateUser,
  listUser,
  deleteUser,
} from "@/api/auth/user/user.js";
import Submit from "./components/submit.vue"; // submit固定的子组件
import { DeleteComfirmBox } from "@/utils/MessageUtils.js";
import { checkResult } from "@/utils/Rutil.js";
import { colorManager } from "@/assets/scss/colors-util"; // 固定的颜色管理

const insertDialogVisible = ref(false);
const updateDialogVisible = ref(false);
const listLoading = ref(true);

/**
 * 排序处理器
 */
// 排序规则--根据哪个列
var sortKeyOptions = [{ label: "ID", key: "id" }];
const handleSortKeyOptionsChange = (value) => {
  console.log("选中的值：", value);
};
// 排序规则--升序和降序
var sortOptions = [
  { label: "Descending", key: 0 },
  { label: "Ascending", key: 1 },
];
const handleSortOptionsChange = (value) => {
  console.log("选中的值：", value);
};

var downloadLoading = false;

/**
 * 新增处理器
 */
const handleInsert = async () => {
  insertDialogVisible.value = true;
};

// 当前操作的实体的id
const operateId = ref();

/**
 * 编辑处理器
 */
const handleEdit = (index, row) => {
  console.log(index, "row:", row);
  operateId.value = row.id;
  updateDialogVisible.value = true;
};

/**
 * 删除处理器
 */
const handleDelete = async (index, row) => {
  console.log(index, "row", row);
  operateId.value = row.id;
  // 提供删除确认
  const chooseDelete = await DeleteComfirmBox();
  console.log("chooseDelete", chooseDelete);
  if (chooseDelete === true) {
    const res = await deleteUser(operateId.value);
    console.log("handleDelete-res:", res);
    if (checkResult(res)) {
      ElMessage({
        type: "success",
        message: "删除成功！",
      });
      getPage();
    } else {
      ElMessage({
        type: "error",
        message: "删除失败！",
      });
    }
  }
};

// 请求数据，用于service发送请求
const listQuery = ref({
  pageNo: 1,
  pageSize: 5,
  isAsc: 1,
  title: "",
  sortBy: "id",
  // judgeStatus: 20102, // 审核通过
});

// 需要优先规定totol，否则组件会发出错误
const pageResult = ref({
  total: 1,
  list: [],
});

/**
 * 获取分页
 */
const getPage = async () => {
  listLoading.value = true;
  const res = await listUser(listQuery.value);
  console.log(res.data);
  pageResult.value = res.data;
  console.log("pageResult", pageResult.value);
  setTimeout(() => {
    listLoading.value = false;
  }, 250);
};
/**
 * 分页请求handle
 */
const handlePage = () => {
  listQuery.pageNo = 1;
  getPage();
};

onMounted(() => {
  console.log(`User.vue is now mounted.`);
  handlePage();
});
</script>

<style lang="scss" scoped>
.user-container {
  .user-title {
    font-size: 30px;
  }

  .table-header-container {
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center; /* 可选，根据需要调整子项的对齐方式 */

    .filter-container {
    }

    .header-button-set {
    }
  }

  .core-table {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
  }
}

.operate-button-set {
  .el-button {
    margin: 10px;
  }

  display: flex;
  flex-direction: column;
  align-items: center; /* 可选，用于居中对齐 */
}
/* table中列数据的css */
</style>
<!-- 在router中加入子内容：
    {
      path: "/index/user",
      component: () => import("../views/index/user/user.vue"),
    },
  -->
